<template>
  <view>
    <Tabs
      :tabsData="tabsData"
      @change="changeTabsHandle"
    />
    <view class="order_list">
      <view
        v-for="item in orders"
        :key="item.order_id"
        class="order_item"
      >
        <view class="order_item_row">
          <text class="order_item_row_left">订单编号</text>
          <text class="order_item_row_right">{{ item.order_number }}</text>
        </view>
        <view class="order_item_row">
          <text class="order_item_row_left">订单金额</text>
          <text class="order_item_row_right price">{{ item.order_price }}</text>
        </view>
        <view class="order_item_row">
          <text class="order_item_row_left">订单日期</text>
          <text class="order_item_row_right">{{ item.update_time_format }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Tabs from "@/components/Tabs/index.vue";
import { getOrders } from "@/api";
// 1️⃣ 安装第三方包：   npm install dayjs
// 2️⃣ 导入 dayjs
import dayjs from "dayjs";
export default {
  components: {
    Tabs,
  },
  data() {
    return {
      tabsData: [
        { id: 1, type: 1, text: "全部" },
        { id: 2, type: 2, text: "待付款" },
        { id: 3, type: 3, text: "代发货" },
      ],
      type: 1,
      orders: [],
    };
  },
  onLoad() {
    this.getOrdersData();
  },
  methods: {
    async getOrdersData() {
      const res = await getOrders({
        type: this.type,
      });
      // console.log(res);
      this.orders = res.data.message.orders.map((item) => {
        return {
          ...item,
          // 3️⃣ 安装说明书调用格式化方法
          update_time_format: dayjs(item.update_time * 1000).format(
            "YYYY-MM-DD HH:mm:ss"
          ),
        };
      });
    },
    changeTabsHandle(index) {
      // console.log(index);
      const { type } = this.tabsData[index];
      this.type = type;
      this.getOrdersData();
    },
  },
};
</script>

<style lang="less">
.order_list {
  .order_item {
    background-color: #fff;
    border-bottom: 20rpx solid #f2f2f2;
    padding: 20rpx;
    .order_item_row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      .order_item_row_left {
        color: #999;
      }

      .order_item_row_right {
      }
    }
  }
}
</style>